<!DOCTYPE html>
<html lang="en" dir="ltr"></html>
<head>
    <title>CKEditor 5</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="editor"></div>
<input type="file"/>
<script src="../build/ckeditor.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.js"></script>
<!--<script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>-->

<script>
    // const input = document.querySelector('input');
    // Rx.Observable.fromEvent(input, 'change').subscribe((e) => {
    //     const formData = new FormData();
    //     formData.append("file", e.target.files[0]);
    //     const test = aj("http://127.0.0.1:8080/upload", "POST", "json", formData);
    //     test.subscribe((res) => {
    //             console.log(res);
    //         }, error => {
    //             console.log(error);
    //         },
    //         () => {
    //         })
    // });
    //
    function aj(url, type = "POST", dataType = "json", data) {
        // return Rx.Observable.fromPromise(
        return $.ajax({
                url,
                dataType,
                type,
                async: false,
                data,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
            })
        // );
    }
    //
    // function getObservable() {
    //     return new Rx.Observable((observe) => {
    //         observe.next('1111');
    //     });
    // }
    //
    // function getNextObservable() {
    //     return new Rx.Observable((nextObserve) => {
    //         getObservable().subscribe((data) => {
    //             nextObserve.next(data)
    //         });
    //     })
    // }
    //
    // getNextObservable().subscribe((res) => {
    //     console.log(res);
    // })
    ClassicEditor.create(document.querySelector('.editor'), {
        videoUpload: (file) => {
            // return new Rx.Observable((nextObserve) => {
            	const formData = new FormData();
            return new Promise((resolve, reject) => {
                formData.append("file", file);
                const test = aj("http://127.0.0.1:8080/upload", "POST", "json", formData).then(res=>{
                    resolve({url:'http://127.0.0.1:8080/'+res.url})
                });
            })

            // 	test.subscribe((res) => {
            // 				nextObserve.next({url: "http://127.0.0.1:8080/" + res.url});
            // 			}, error => {
            // 				nextObserve.error(res)
            // 			},
            // 			() => {
            // 			})
            // });
           /* return new Promise((resolve, reject) => {
                const formData = new FormData();
                formData.append("file", file);
                const test = aj("http://127.0.0.1:8081/upload", "POST", "json", formData);
                test.subscribe((res) => {
                    resolve({url: "http://127.0.0.1:8081/" + res.url});
                }, error => {
                    reject(res)
                })
            });*/


        },
        imageUpload: (file) => {
            // return new Rx.Observable((nextObserve) => {
            // 	const formData = new FormData();
            // 	formData.append("file", file);
            // 	const test = aj("http://127.0.0.1:8080/upload", "POST", "json", formData);
            // 	test.subscribe((res) => {
            // 				nextObserve.next({url: "http://127.0.0.1:8080/" + res.url});
            // 			}, error => {
            // 				nextObserve.error(res)
            // 			},
            // 			() => {
            // 			})
            // });
            // return new Promise((resolve, reject) => {
            //     const formData = new FormData();
            //     formData.append("file", file);
            //     const test = aj("http://127.0.0.1:8081/upload", "POST", "json", formData);
            //     test.subscribe((res) => {
            //             resolve({url: "http://127.0.0.1:8081/" + res.url});
            //         }, error => {
            //             reject(res)
            //         }
            //     )
            // });
            const formData = new FormData();
            return new Promise((resolve, reject) => {
                formData.append("file", file);
                const test = aj("http://127.0.0.1:8080/upload", "POST", "json", formData).then(res=>{
                    resolve({url:'http://127.0.0.1:8080/'+res.url})
                });
            })
        },
        mediaEmbed: {
            extraProviders: [
                {
                    name: 'zdy',
                    url: [
                        /(.*?)/,
                    ],
                    html: match => {
                        const src = match.input;
                        return (
                            '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;pointer-events: auto;">' +
                            '<video controls style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" src="' + src + '">' +
                            '</video>' +
                            '</div>'
                        );
                    }
                },
            ]
        },
        heading: {
            options: [
                {model: 'paragraph', title: '正文', class: 'ck-heading_paragraph'},
                {
                    model: 'heading1',
                    view: 'h1',
                    title: '标题1',
                    class: 'ck-heading_heading1',
                },
                {
                    model: 'heading2',
                    view: 'h2',
                    title: '标题2',
                    class: 'ck-heading_heading2',
                },
                {
                    model: 'heading3',
                    view: 'h3',
                    title: '标题3',
                    class: 'ck-heading_heading3',
                },
                {
                    model: 'heading4',
                    view: 'h4',
                    title: '标题4',
                    class: 'ck-heading_heading4',
                },
            ],
        },
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'underline',
                'fontBackgroundColor',
                'fontColor',
                'fontSize',
                'fontFamily',
                'link',
                'insertTable',
                'imageUpload',
                'mediaEmbed',
                // 'CKFinder',
                'bulletedList',
                'numberedList',
                'removeFormat',
                '|',
                'alignment',
                'indent',
                'outdent',
                '|',
                'blockQuote',
                'undo',
                'redo',
                'code',
                'codeBlock',
                'highlight',
                'exportPdf',
                'specialCharacters',
                'horizontalLine',
                'MathType',
                'ChemType',
                'strikethrough',
                'subscript',
                'superscript',
                'todoList',
                'restrictedEditingException',
            ]
        },
        alignment: {
            options: ['left', 'center', 'right', 'justify'],
        },
        language: 'zh-cn',
        image: {
            toolbar: [
                'imageTextAlternative',
                '|',
                'imageStyle:alignLeft',
                'imageStyle:full',
                'imageStyle:alignRight',
            ],
            resizeUnit: 'px',
            types: ['jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff'],
            styles: ['full', 'alignLeft', 'alignRight'],
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells',
                'tableCellProperties',
                'tableProperties',
            ],
        },
        tableProperties: {
            // ...
        },

        tableCellProperties: {
            // ...
        },
        fontFamily: {
            options: [
                'default',
                'Arial, Helvetica, sans-serif',
                'Courier New, Courier, monospace',
                'Georgia, serif',
                'Lucida Sans Unicode, Lucida Grande, sans-serif',
                'Tahoma, Geneva, sans-serif',
                'Times New Roman, Times, serif',
                'Trebuchet MS, Helvetica, sans-serif',
                'Verdana, Geneva, sans-serif',
            ],
        },
        licenseKey: '',

    })
        .then(editor => {
            window.editor = editor;


        })
        .catch(error => {
            console.error('Oops, something gone wrong!');
            console.error('Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:');
            console.warn('Build id: ihdq7ghnnkyb-t8ajmnkqisva');
            console.error(error);
        });
</script>
</body>
